<template>
  <!-- // 分配角色 -->
  <div>
    <!--  element 官方的 复选框组件 -->
    <el-checkbox-group v-model="roleIds">
      <!-- label就是复选框的value ,但是不要直接使用 :label="item.name ,可以使用 插值表达式 渲染中文 -->
      <el-checkbox v-for="item in roles" :key="item.id" :label="item.id">
        <template>
          {{ item.name }}
        </template>
      </el-checkbox>

    </el-checkbox-group>

    <div style="margin-top: 20px; text-align: right">
      <el-button type="primary" @click="hSubmit">确定</el-button>
      <el-button @click="closeDialog">取消</el-button>
    </div>
  </div>
</template>
<script>
import { getRoles } from '@/api/roles'
import { getUserDetailById } from '@/api/user'
import { assignRoles } from '@/api/employees'
export default {
  name: 'AssginRole',
  props: {
    userId: { // 父组件传过来的 用户id
      type: String,
      required: true }
  },
  data() {
    return {
      roleIds: [], // 用于存放 选中的权限
      roles: []
    }
  },
  created() {
    // this.loadRoles() // 方案1: 此组件生命周期 与 shouDialogRole 一致 , 组件创建后就需要 发请求

    // 方案2: 由于 是从父组件中调用子组件方法, 所以 created周期 不需要调用函数了
  },
  methods: {
    async loadRoles() { // 点击分配角色, 1. 请求:渲染所有角色复选框; 2. 请求:根据用户id 给复选框打✔
      const result = await getUserDetailById(this.userId).catch(e => console.dir(e))
      if (!result.success) return
      //   console.log(result)
      this.roleIds = result.data.roleIds // 给复选框打✔

      // 两次请求 顺序 == 两种用户体验
      const res = await getRoles().catch(e => e)
      if (!res.success) return
      //   console.log(res)
      this.roles = res.data.rows // 渲染所有角色复选框
    },
    async hSubmit() { // 点击确定, 发送
      const res = await assignRoles({ id: this.userId, roleIds: this.roleIds }).catch(e => e)

      if (!res.success) return this.$message.error(res.message)
      this.$message.success(res.message)

      this.$emit('close') // 分配角色成功后, 通知父组件关闭对话框
    },
    closeDialog() { // 点击取消, 通知父组件关闭对话框
      this.$emit('close')
    }
  }
}
</script>
